<template>
  <!-- 搜索部分 -->
  <div class="serch">
    <div class="serch_all">
      <div class="sel">
        <a>课程</a>

        <div class="tran">></div>
        <div
          class="eje"
          style="position: relative;z-index:1000;"
        >
          <ul style="padding:0;margin:0;">
            <li style="position:relative;right:40px;width:100px">课程</li>
            <li>学科</li>
          </ul>
        </div>
      </div>
      <div class="ser">
        <span>丨</span>
        <input
          type="text"
          style="width:450px;border:none;outline: none;"
          placeholder="输入关键词进行搜索"
        >
        <el-button
          class="serchBtn"
          type="primary"
        >搜索</el-button>
      </div>

    </div>
    <!-- 轮播图 -->
    <div
      class="block"
      style="margin-top:20px;"
    >
      <span class="demonstration"></span>
      <el-carousel
        trigger="click"
        height="400px"
      >
        <el-carousel-item>
          <img
            src="@/assets/index/1.jpg"
            alt=""
            style="width:100%;height:100%"
          >
        </el-carousel-item>
        <el-carousel-item>
          <img
            src="@/assets/index/2.jpg"
            alt=""
            style="width:100%;height:100%"
          >
        </el-carousel-item>
        <el-carousel-item>
          <img
            src="@/assets/index/3.jpg"
            alt=""
            style="width:100%;height:100%"
          >
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 主体部分 -->
    <div class="main">

      <ul class="banner">
        <li>
          <img
            src="@/assets/index/a.png"
            alt=""
          >
          <p>课程体系升级</p>
          <h4>六维全息课程</h4>
        </li>
        <li>
          <img
            src="@/assets/index/b.png"
            alt=""
          >
          <p>多学科联合项目</p>
          <h4>CREA项目研发模型</h4>
        </li>
        <li>
          <img
            src="@/assets/index/c.png"
            alt=""
          >
          <p>全程面授大咖云集</p>
          <h4>百人讲师天团</h4>
        </li>
        <li>
          <img
            src="@/assets/index/d.png"
            alt=""
          >
          <p>行业发展有前景</p>
          <h4>后续有提升空间</h4>
        </li>
      </ul>
      <p style="font-size: 16px;margin: 10px 0 0 15px;">现有课程：</p>
      <!-- 第一排 -->
      <div>
        <p><span style="font-size:22px">C++语言程序设计基础</span></p>
        <p><span style="font-size:12px;color:#aaa">郑莉 李超 等</span></p>
        <p><span style="font-size:13px;color:#aaa">C++是从C语言发展演变而来的一种面向对象的程序设计语言，本课程是一门面向广大初学者的入门课程。</span></p>
      </div>
      <div>
        <p><span style="font-size:22px">数据结构（上）</span></p>
        <p><span style="font-size:12px;color:#aaa">邓俊辉</span></p>
        <p><span style="font-size:13px;color:#aaa">本课程旨在围绕各类数据结构的设计与实现，揭示其中的规律原理与方法技巧；同时针对算法设计及其性能分析，使学生了解并掌握主要的套路与手段。</span></p>
      </div>
      <div>
        <p><span style="font-size:22px">数据结构（下）</span></p>
        <p><span style="font-size:12px;color:#aaa">邓俊辉</span></p>
        <p><span style="font-size:13px;color:#aaa">本课程旨在围绕各类数据结构的设计与实现，揭示其中的规律原理与方法技巧；同时针对算法设计及其性能分析，使学生了解并掌握主要的套路与手段。</span></p>
      </div>
      <div>
        <p><span style="font-size:22px">操作系统</span></p>
        <p><span style="font-size:12px;color:#aaa">向勇 陈渝</span></p>
        <p><span style="font-size:13px;color:#aaa">操作系统课讲解操作系统中如何管理和协调应用程序对计算机系统中软硬件资源的使用。</span></p>
      </div>
      <!-- 第二排 -->
      <div>
        <p><span style="font-size:22px">JAVA程序设计</span></p>
        <p><span style="font-size:12px;color:#aaa">郑莉</span></p>
        <p><span style="font-size:13px;color:#aaa">【国家精品课】课程介绍Java的基础语法和面向对象的程序设计方法和GUI程序开发方法。</span></p>
      </div>
      <div>
        <p><span style="font-size:22px">网络技术与运用</span></p>
        <p><span style="font-size:12px;color:#aaa">沈鑫剡 俞海英 等</span></p>
        <p><span style="font-size:13px;color:#aaa">如果你想跟上网络时代的步伐，或者正在准备全国计算机等级考试三级，或者Cisco CCNA认证考试，就请走进我们的MOOC吧。</span></p>
      </div>
      <div>
        <p><span style="font-size:22px">C++程序设计进阶</span></p>
        <p><span style="font-size:12px;color:#aaa">郑莉 李超 等</span></p>
        <p><span style="font-size:13px;color:#aaa">C++是从C语言发展演变而来的一种面向对象的程序设计语言，本课程是一门面向广大初学者的入门课程。</span></p>
      </div>
      <div>
        <p><span style="font-size:22px">C程序设计案例教程</span></p>
        <p><span style="font-size:12px;color:#aaa">张莉</span></p>
        <p><span style="font-size:13px;color:#aaa">C语言曾开发出UNIX操作系统等经典系统。随着物联网、人工智能、大数据、云计算等新技术不断发展，也广泛用于开发各种应用程序，且易于使用。</span></p>
      </div>

      <!-- 第三排 -->
      <div>
        <p><span style="font-size:22px">大数据技术与运用</span></p>
        <p><span style="font-size:12px;color:#aaa">李军</span></p>
        <p><span style="font-size:13px;color:#aaa">结合应用实例融会贯通大数据中的理论方法和系统知识（平台、模块、工具），体会运用大数据技术解决实际问题的思路和效果。</span></p>
      </div>
      <div>
        <p><span style="font-size:22px">软件工程</span></p>
        <p><span style="font-size:12px;color:#aaa">刘强 刘璘</span></p>
        <p><span style="font-size:13px;color:#aaa">本课程为国家级精品在线开放课程和国家级一流本科课程，并入围首批中国高校计算机教育慕课联盟—华为技术公司"智能基座"课程</span></p>
      </div>
      <div>
        <p><span style="font-size:22px">计算机文化基础</span></p>
        <p><span style="font-size:12px;color:#aaa">李秀 姚瑞霞 等</span></p>
        <p><span style="font-size:13px;color:#aaa">面对无处不在的信息技术，你一定希望应用工具和技术解决常见的学习工作问题。甚至希望能够将信息技术应用到新的地方，那么，请加入课程学习！</span></p>
      </div>
      <div>
        <p><span style="font-size:22px">程序设计基础</span></p>
        <p><span style="font-size:12px;color:#aaa">徐明星 王瑀屏 等</span></p>
        <p><span style="font-size:13px;color:#aaa">如何从生活中提炼算法，使计算机能象人一样解决问题？如何运用计算思维，用计算机来提高人的能力？我们将为你呈现一个既熟悉又陌生的精彩世界，带你感悟不一样的计算人生。</span></p>
      </div>
      <router-link
        to="/study"
        style="float:right;"
      >点击查看所有课程</router-link>
    </div>
    <!-- 底部部分 -->
    <div class="footer">
      <br>
      <p>湖北：武汉市洪山区武汉职业技术学院</p>
      <p>全国服务监督电话：400-000-0000</p>
      <router-link
        to="/about"
        style="color:white"
      >关于我们</router-link>
    </div>

    <!-- 备案部分 -->
    <div class="beia">
      <br>
      <p>Copyright © Tedu.cn All Rights Reserved 鄂ICP备99999999号-00</p>
      <p><span style="color:gray">鄂公网安备 000000099999999号</span> 武汉职业技术学院 版权所有</p>

    </div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {

    }
  },
  methods: {


  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
}
/* 搜索部分 */
.serch {
  width: 100%;
  height: 82px;
  background-color: #eee;
  padding: 20px 0;
  /* text-align: center; */
}
.serch .serch_all {
  width: 800px;
  height: 100%;
  /* background-color:white; */
  margin: 0 auto;
}
.serch .serch_all .sel {
  width: 80px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background-color: white;
  float: left;
  cursor: pointer;
}
.serch .serch_all .sel a {
  color: gray;
  float: left;
  margin-left: 20px;
}
.serch .serch_all .sel .tran {
  float: left;
  width: 11px;
  height: 22px;
  transform: rotate(90deg);
  color: gray;
  position: relative;
  top: 10px;
  left: 20px;
}
.serch .serch_all .sel .eje {
  width: 80px;
  height: 80px;
  background-color: #eee;
  position: relative;
  top: 40px;
  left: 5px;
  display: none;
  border-radius: 5px;
}
.serch .serch_all .sel:hover > .eje {
  display: block;
}
.serch .serch_all .sel .eje ul li {
  width: 80px;
  height: 80px;
  position: relative;
}

.serch .serch_all .sel .eje ul li {
  list-style-type: none;
  font-size: 14px;
  width: 80px;
  height: 40px;
  /* position: relative; */
  text-align: center;
}
.serch .serch_all .sel .eje ul li:hover {
  color: blue;
}
.serch .serch_all .ser {
  width: 660px;
  height: 40px;
  background-color: white;
  float: left;
}
.serch .serch_all .ser span {
  color: #ddd;
  line-height: 40px;
}
.serch .serch_all .serchBtn {
  width: 80px;
  height: 40px;
  float: right;
  font-size: 15px;
}

/* 轮播图 */
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

/* 主体部分 */
.banner {
  height: 240px;
  /* background-color: red; */
  display: flex;
}
.banner li {
  list-style-type: none;
  flex: 25%;
  text-align: center;
  margin-top: 40px;
}
.banner li h4 {
  font-weight: bold;
}
.banner li p {
  margin-top: 10px;
  color: #999;
}
.main {
  width: 1220px;
  height: 1050px;
  margin: 0 auto;
  /* background-color: red; */
}
.main > div {
  width: 285px;
  height: 200px;
  /* background-color: #aaa; */
  float: left;
  margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 20px;
}
.main > div p {
  margin: 10px;
}
.main > div:hover {
  box-shadow: gray 10px 10px 30px 5px;
  border-radius: 10px;
  cursor: pointer;
}

/* 底部部分 */
.footer {
  width: 100%;
  height: 130px;
  background-color: #444;
  text-align: center;
  color: white;
}
.footer p {
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.beia {
  height: 90px;
  width: 100%;
  background-color: black;
  text-align: center;
  color: white;
  font-size: 12px;
}
.beia p {
  height: 20px;
}
.foot-wrap {
  float: left;
}
</style>